<template>
  <div class='forumDiv'>
    <!--<div class="tag" style="margin-bottom: 10px">java</div>-->
    <div style="border-bottom:  1px solid #ccc;">
      <div class="" style="margin-bottom: 20px;font-size: 22px">{{topic.title}}</div>
      <!--<div style="color: #82848a">{{topic.content}}</div>-->
      <div style="height: 42px;margin-top: 10px">
        <el-button type="success" round style="float: right;" @click="collection">收藏</el-button>
        <el-button type="success" round style="float: right" @click="recommend">推荐</el-button>
      </div>
    </div>
    <div style="margin-top: 20px">
      {{topic.content}}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        topic: {},
        loading: true,
      };
    },
    created() {
      let topicId = this.$route.params.id;
      this.fetchData(topicId);
    },
    methods: {
      collection() {
        let topicId = this.$route.params.id;
        var _self = this;
        var url = 'topic/coll/' + topicId
        _self.$http.get(url).then(function (response) {
          _self.$message({
            message: "收藏成功",
            type: 'success'
          });
        }).catch();
      },
      recommend() {
        let topicId = this.$route.params.id;
        var _self = this;
        var url = 'topic/tuijie/' + topicId
        _self.$http.get(url).then(function (response) {
          _self.$message({
            message: "推荐成功",
            type: 'success'
          });
        }).catch();
      },
      fetchData(topicId) {
        var _self = this;
        var url = 'topic/' + topicId
        _self.$http.get(url).then(function (response) {
          _self.topic = response.data.data
        }).catch();
      }
    }
  };
</script>

<style scoped>
  .el-pagination .el-pager .active {

    background-color: #6bd5f1 !important;
  }

  .forumDiv {
    padding: 0;
    box-sizing: border-box;
    border: none;
    background-color: #ffffff;
    width: 60%;
    display: block;
    margin-left: 5%;
    margin-top: 3%;

  }

  .stuff > span {
    font-size: 14px;
  }

  .desc {
    font-size: 1rem;
    color: #a1a8b8;
  }

  .listLeftRecommend {
    background-color: #009a61;
    float: left;
    text-align: center;
    line-height: 50px;
    margin-left: 10px;
    margin-top: 20px;
    font-size: 14px;
    padding: 0 10px;
    color: white;
  }

  .tag {
    width: 20px;
    color: #017e66;
    margin-right: 10px;
    display: block;
    line-height: 23px;
    padding: 0 12px;
    background-color: rgba(1, 126, 102, 0.08);
  }

  .profile {
    padding: 1rem;
    background: #eff2f7;
    border-radius: 0.3rem;
  }

  .profile div {
    margin-bottom: 1.5rem;
  }

  .profile div span {
    font-size: 25px;
    color: black;
    margin-left: 1rem;
  }

  .profile p {
    display: flex;
    align-items: center;
    color: grey;
    margin: 0.5rem 0;
  }

  .profile p span {
    margin: 0 0.5rem;
    color: black;
  }

  .profile svg {
    color: black;
    margin-left: 0.2rem;
  }

  .recentTopics img,
  .recentReplies img {
    width: 5rem;
    height: 5rem;
  }

  .recentTopics > p,
  .recentReplies > p {
    margin-bottom: 1rem;
    color: black;
    padding-bottom: 1.5rem;
  }

  .userTitle {
    font-size: 25px;
  }

  .recentTopics {
    padding: 1rem;
    background: #d3dce6;
    border-radius: 0.3rem;
  }

  .recentReplies {
    background: #e5e9f2;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.3rem;
  }

  .recentReplies div,
  .recentTopics div {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    border-bottom: 2px solid #c0ccda;
    padding-bottom: 1rem;
  }

  .recentTopics div {
    border-bottom: 2px solid #99a9bf;
  }

  .recentReplies div img,
  .recentTopics div img {
    margin-right: 1rem;
  }

  .pagination {
    margin-top: 20px;
  }

  .el-pagination .el-pager .active {

    background-color: #6bd5f1
  }
</style>
